<template>
  <view class="goods_pay">
    <!-- 头部 -->
    <view class="hear_box">
      <view class="hear_box_btn" v-if="!address">
        <view class="goodsPay_address">
          <u-button
            shape="circle"
            :custom-style="customStyle"
            @click="addressBtn"
            >选择地址</u-button
          >
        </view>
      </view>
      <view class="hear_box_txt" v-else>
        <view class="address-detail">{{ addressDetail }}</view>
        <view class="address-user"
          >{{ address.userName }} {{ address.telNumber }}
        </view>
      </view>
    </view>
    <!-- 已选商品 -->
    <view class="selected_goods">
      <!-- 标题 -->
      <view class="goods_title">已选商品</view>
      <!-- 内容 -->
      <view
        class="selected_goodsList"
        v-for="item in checkedCartList"
        :key="item.goods_id"
      >
        <!-- 图片 -->
        <view class="goodsList_pic">
          <u-image
            width="191rpx"
            height="191rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 内容 -->
        <view class="goodsList_content">
          <!-- 文字 -->
          <view class="goodsList_text">
            {{ item.goods_name }}
          </view>
          <!-- 价钱+数量 -->
          <view class="goodsList_priceCount">
            <!-- 价钱 -->
            <view class="goodsList_price">
              {{ item.goods_price }}
            </view>
            <!-- 数量 -->
            <view class="goodsList_Count"> x{{ item.nums }} </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <footer class="goods_footer">
      <view class="gooods_List_Count"
        >合计:
        <text class="priceTxt">￥{{ checkedPrice }}</text>
      </view>
      <view class="goods_goPic">
        <u-button shape="circle" @click="handlePay" :custom-style="goPayBtn"
          >去支付({{ checkedCount }})</u-button
        >
      </view>
    </footer>
  </view>
</template>

<script>
import { mapGetters,mapState, mapActions  } from "vuex";
export default {
  data() {
    return {
      address: null,
      customStyle: {
        color: "red",
      },
      goPayBtn: {
        width: "150rpx",
        height: "50rpx",
        backgroundColor: "#b6b6b6",
        color: "white",
      },
    };
  },
  computed: {
    ...mapState("user",["token"]),
    ...mapGetters("cart", ["checkedCartList", "checkedPrice", "checkedCount"]),
    // 详细地址
    addressDetail() {
      if (!this.address) return "";
      return (
        this.address.provinceName +
        this.address.cityName +
        this.address.countyName +
        this.address.detailInfo
      );
    },
  },
  methods: {
    ...mapActions("user",["getToken"]),
    async addressBtn() {
      const [err, res] = await uni.chooseAddress();
      if (!err) {
        this.address = res;
        console.log(this.address);
      }
    },
    // 点击结算按钮
    async handlePay() {
      console.log(115,this.token);
      // 判断有没有收货地址
      if (!this.address) {
        uni.showToast({
          title: "您还没有选择收货地址",
          icon: "none",
        });
        return;
      }
      // 判断有没有token 没有就获取
      if(!this.token){
        await this.getToken()
        console.log();
      }
      

      // 准备创建订单参数
      const orderParams = {
        order_price: this.checkedPrice,
        consignee_addr: `${this.addressDetail}|${this.address.userName}|${this.address.telNumber}`,
        goods: this.checkedCartList.map((item) => ({
          goods_id: item.goods_id,
          goods_number: item.nums,
          goods_price: item.goods_price,
        })),
      };

      //获取订单编号
      const { order_number } = await this.$u.post(
        "/my/orders/create",
        orderParams
      );

      //创建支付流程 获取支付接口所需要的参数
      const { pay } = await this.$u.post(
        "/my/orders/req_unifiedorder",
        { order_number }
      );
      console.log(pay,168);

      //微信支付  调用接口 传递参数
      const res = await uni.requestPayment(pay);
      // console.log(res,172);
    },
  },
};
</script>

<style lang="scss">
.goods_pay {
  background-color: #f9f9f9;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.hear_box_btn {
  width: 711rpx;
  height: 187rpx;
  background-color: white;
  margin: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hear_box_txt {
  width: 711rpx;
  height: 187rpx;
  background-color: white;
  margin: 20rpx;
}
.goodsPay_address {
  width: 300rpx;
  height: 80rpx;
  background-color: white;
}
.goods_title {
  margin: 10rpx 0;
}
.selected_goods {
  margin: 20rpx;
  // background-color: pink;
}
.selected_goodsList {
  display: flex;
  // background-color: skyblue;
}
.goodsList_content {
  background-color: white;
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goodsList_priceCount {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx 0 0;
}
.goodsList_price {
  color: $themeColor;
}
.goods_footer {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 83rpx;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 0 20rpx;
  .priceTxt {
    color: $themeColor;
  }
}
</style>